<template>
  <!-- 查询表单 -->
  <el-form :inline="true" class="demo-form-inline" :model="formInline">
    <el-form-item label="学员姓名" prop="name">
      <el-select v-model="formInline.name" placeholder="选择学员名称">
        <el-option label="不限" value="" />

        <el-option
          v-for="item in optionsCocah"
          :label="item.name"
          :value="item.name"
          :key="item.objectId"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="身份证号" prop="cardId">
      <el-input v-model="formInline.cardId" placeholder="输入身份证号查询" />
    </el-form-item>

    <el-form-item label="手机号码" prop="tel">
      <el-input v-model="formInline.tel" placeholder="输入学员手机号" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" :icon="Search" @click="handleref"
        >搜索/刷新</el-button
      >
      <el-button type="danger" :icon="Plus" @click="handleadd"
        >添加学员</el-button
      >
      <el-button type="success" :icon="FolderOpened" @click="handleExcel"
        >档案导出</el-button
      >
      <!-- 添加学员弹出框 -->
      <el-dialog title="添加学员档案" v-model="dialogVisible" destroy-on-close>
        <StuAdd v-model="dialogVisible" @handlerefsh="handleref"></StuAdd>
      </el-dialog>
    </el-form-item>
  </el-form>
  <!-- 学员受理状态 弹出框-->
  <el-dialog
    title="调整学员受理状态"
    v-model="dialogState"
    width="30%"
    destroy-on-close
  >
    <StuState
      v-model="dialogState"
      :data="JSON.stringify(multipleSelection)"
      @handleref="handleref"
    ></StuState>
  </el-dialog>
  <!-- 学员科目状态 弹出框-->
  <el-dialog
    title="调整学员训练科目"
    v-model="dialogSubject"
    width="30%"
    destroy-on-close
  >
    <StuSubject
      v-model="dialogSubject"
      :Subdata="JSON.stringify(multipleSelection)"
      @handleref="handleref"
    ></StuSubject>
  </el-dialog>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="success" :icon="CircleCheck" @click="handleState"
          >批量受理</el-button
        >
        <el-button type="success" :icon="Operation" @click="handleSubject"
          >调配科目</el-button
        >
      </div>
    </template>
    <div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        show-overflow-tooltip
        @selection-change="handleSelectionChange"
        fit
        table-layout="auto"
      >
        <el-table-column type="selection" />

        <el-table-column label="学员姓名" width="80" fixed>
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="性别">
          <template #default="scope">
            <el-tag
              class="mx-1"
              effect="dark"
              round
              v-if="scope.row.sex === '男'"
            >
              {{ scope.row.sex }}
            </el-tag>
            <el-tag class="mx-1" effect="dark" type="danger" round v-else>
              {{ scope.row.sex }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="身份证号" width="180">
          <template #default="scope">{{ scope.row.cardId }}</template>
        </el-table-column>

        <el-table-column label="手机号码" width="120">
          <template #default="scope">{{ scope.row.tel }}</template>
        </el-table-column>

        <el-table-column label="状态">
          <template #default="scope">
            <el-tag
              class="mx-1"
              effect="dark"
              type="success"
              v-if="scope.row.trainState === '培训中'"
            >
              {{ scope.row.trainState }}
            </el-tag>
            <el-tag
              class="mx-1"
              effect="dark"
              v-else-if="scope.row.trainState === '结业'"
            >
              {{ scope.row.trainState }}
            </el-tag>
            <el-tag class="mx-1" effect="dark" type="info" v-else>
              {{ scope.row.trainState }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="准驾车型" width="120">
          <template #default="scope">{{ scope.row.carType }}</template>
        </el-table-column>
        <el-table-column label="报考班型" width="180">
          <template #default="scope">{{ scope.row.type }}</template>
        </el-table-column>

        <el-table-column label="各科进度" width="120">
          <template #default="scope">
            <el-space v-if="scope.row.subject === '科目一'" :size="0">
              <el-tag effect="dark" type="success" size="small" round>1</el-tag>
              <el-tag effect="dark" type="info" size="small" round>2</el-tag>
              <el-tag effect="dark" type="info" size="small" round>3</el-tag>
              <el-tag effect="dark" type="info" size="small" round>4</el-tag>
            </el-space>
            <el-space v-else-if="scope.row.subject === '科目二'" :size="0">
              <el-tag effect="dark" type="success" size="small" round>1</el-tag>
              <el-tag effect="dark" type="success" size="small" round>2</el-tag>
              <el-tag effect="dark" type="info" size="small" round>3</el-tag>
              <el-tag effect="dark" type="info" size="small" round>4</el-tag>
            </el-space>
            <el-space v-else-if="scope.row.subject === '科目三'" :size="0">
              <el-tag effect="dark" type="success" size="small" round>1</el-tag>
              <el-tag effect="dark" type="success" size="small" round>2</el-tag>
              <el-tag effect="dark" type="success" size="small" round>3</el-tag>
              <el-tag effect="dark" type="info" size="small" round>4</el-tag>
            </el-space>

            <el-tag
              v-else-if="scope.row.subject === '科目四'"
              effect="dark"
              type="success"
              size="small"
              round
              v-for="(item, index) in scope.row.progress.split('')"
              :key="index"
            >
              {{ item }}
            </el-tag>

            <el-tag
              v-else
              effect="dark"
              type="info"
              size="small"
              round
              v-for="(item, indexs) in scope.row.progress.split('')"
              :key="indexs"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="当前科目" width="120">
          <template #default="scope">{{ scope.row.subject }}</template>
        </el-table-column>

        <el-table-column label="当前科目状态" width="120">
          <template #default="scope">{{ scope.row.subjectState }}</template>
        </el-table-column>

        <el-table-column label="受理状态" width="120">
          <template #default="scope">{{ scope.row.state }}</template>
        </el-table-column>

        <el-table-column label="校区" width="100">
          <template #default="scope">{{ scope.row.schoolName }}</template>
        </el-table-column>

        <el-table-column label="本地外地" width="120">
          <template #default="scope">{{ scope.row.isIndigen }}</template>
        </el-table-column>
        <el-table-column label="推荐人">
          <template #default="scope">{{ scope.row.referrer }}</template>
        </el-table-column>
        <el-table-column label="地址" width="310">
          <template #default="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="注册时间" width="200">
          <template #default="scope">{{
            scope.row.Regtime.replace("T", " ").replace(".000Z", "")
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
            <el-button
              type="primary"
              round
              size="small"
              :icon="Tickets"
              @click="handleDetails(scope.$index, scope.row)"
            >
              详情</el-button
            >

            <el-button
              type="info"
              round
              size="small"
              :icon="Money"
              disabled
              v-if="scope.row.MoneyState === '已缴费'"
              @click="handleMoney(scope.$index, scope.row)"
              >缴费</el-button
            >
            <el-button
              type="success"
              round
              size="small"
              :icon="Money"
              v-else
              @click="handleMoney(scope.$index, scope.row)"
              >缴费</el-button
            >

            <el-popover placement="top-start" trigger="click">
              <el-space direction="vertical" alignment="center">
                <el-button size="large" :icon="Document" text class="m-l-3"
                  >档案袋</el-button
                >
                <el-button size="large" :icon="Printer" text class="m-l-3"
                  >打印</el-button
                >
                <el-button
                  size="large"
                  :icon="Warning"
                  text
                  class="m-l-3"
                  @click="handlequit(scope.$index, scope.row)"
                  >退档</el-button
                >
              </el-space>

              <template #reference>
                <el-button
                  type="warning"
                  round
                  size="small"
                  :icon="More"
                  @click="visible = !visible"
                  >更多</el-button
                >
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!-- 缴费弹出框 -->
      <el-dialog title="缴报名费" v-model="dialogMoney" destroy-on-close>
        <StuMoney
          v-model="dialogMoney"
          :Moneydata="JSON.stringify(MoneyDate)"
          @handleref="handleref"
        />
      </el-dialog>

      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import StuMoney from "./Stu_Money.vue";
import StuAdd from "./stu-add.vue";
import StuSubject from "./Stu_Subject.vue";
import locale from "element-plus/es/locale/lang/zh-cn";
import { reactive, ref, onMounted } from "vue";
import { stuExamInfoGet } from "../../../api/student";
import { StuCondGet, StuAllGet, StuRenewalPut } from "../../../api/students";
import { useRouter } from "vue-router";
import {
  Plus,
  FolderOpened,
  Search,
  CircleCheck,
  Operation,
  Tickets,
  More,
  Money,
  Printer,
  Document,
  Warning,
} from "@element-plus/icons-vue";
import { excelExport2 } from "../../../utils/excel";
import StuState from "./Stu_State.vue";
import { ElMessage } from "element-plus";

const formInline = reactive({
  name: "",
  tel: "",
  cardId: "",
});

const handleref = () => {
  StuCondGet(formInline).then((res) => {
    tableData.value = res.data.results;
    total.value = res.data.results.length;
  });
};

const optionsCocah = ref<User[]>([]);

// 学员增加弹出框
const dialogVisible = ref(false);
const handleadd = () => {
  dialogVisible.value = true;
};

// 表格
interface User {
  objectId: string;
  name: string;
  sex: string;
  cardId: string;
  tel: string;
  schoolName: string;
  isIndigen: string;
  type: string;
  carType: string;
  Regtime: string;
  referrer?: string;
  address: string;
  trainState: string;
  progress: string;
  subject: string;
  subjectState: string;
  state: string;
}

const tableData = ref<any>(null);
stuExamInfoGet(1, 10).then((res) => {
  tableData.value = res.data.results;
  total.value = res.data.count;
});

const handleSelectionChange = (val: User[]) => {
  //  val 代表被选中的数据
  multipleSelection.value = val;
};

let multipleSelection = ref<User[]>([]);

// 筛选列
// const checkedColumns = ref<string[]>([
//   "学员姓名",
//   "性别",
//   "身份证号",
//   "手机号码",
//   "状态",
//   "准驾车型",
//   "报考班型",
//   "各科进度",
//   "当前科目",
//   "当前科目状态",
//   "受理状态",
//   "校区",
//   "本地外地",
//   "推荐人",
//   "地址",
//   "注册时间",
// ]);
// const colData = ref<any>([
//   { title: "学员姓名", istrue: true },
//   { title: "性别", istrue: true },
//   { title: "身份证号", istrue: true },
//   { title: "手机号码", istrue: true },
//   { title: "状态", istrue: true },
//   { title: "准驾车型", istrue: true },
//   { title: "报考班型", istrue: true },
//   { title: "各科进度", istrue: true },
//   { title: "当前科目", istrue: true },
//   { title: "当前科目状态", istrue: true },
//   { title: "受理状态", istrue: true },
//   { title: "校区", istrue: true },
//   { title: "本地外地", istrue: true },
//   { title: "推荐人", istrue: true },
//   { title: "地址", istrue: true },
//   { title: "注册时间", istrue: true },
//   { title: "操作", istrue: true },
// ]);
// const checkBoxGroup = ref<string[]>([
//   "学员姓名",
//   "性别",
//   "身份证号",
//   "手机号码",
//   "状态",
//   "准驾车型",
//   "报考班型",
//   "各科进度",
//   "当前科目",
//   "当前科目状态",
//   "受理状态",
//   "校区",
//   "本地外地",
//   "推荐人",
//   "地址",
//   "注册时间",
//   "操作",
// ]);

//当前页码
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(10);
const total = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  stuExamInfoGet(currentPage.value, val).then((res) => {
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};
const handleCurrentChange = (val: number) => {
  // console.log(`当前页码: ${val}`)
  currentPage.value = val;
  stuExamInfoGet(val, pageSize.value).then((res) => {
    console.log(res);
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};

// 跳详情页
const router = useRouter();
const handleDetails = (_: any, row: User) => {
  router.push({
    path: "/students/details",
    query: {
      objectId: row.objectId,
      // name: escape(row.name),
    },
  });
};

// 缴费跳出框
const dialogMoney = ref(false);
let MoneyDate = ref({});
const handleMoney = (index: number, row: User) => {
  console.log(index);
  MoneyDate.value = row;
  dialogMoney.value = true;
};

// 导出为Excel 导出所有数据
const StuAllData = ref<any>(null);
StuAllGet().then((res) => {
  StuAllData.value = res.data.results;
  optionsCocah.value = res.data.results;
});
const data = ref("");
onMounted(() => {
  const now = new Date();
  let str = now
    .toLocaleString()
    .split("/")
    .join("")
    .split(":")
    .join("")
    .split(" ")
    .join("");
  data.value = "学员档案数据" + str;
});
const handleExcel = () => {
  excelExport2(
    StuAllData.value,
    {
      name: "学员姓名",
      sex: "性别",
      cardId: "身份证号",
      tel: "手机号码",
      carType: "准驾车型",
      type: "报考班型",
      progress: "各科进度",
      subject: "当前科目",
      subjectState: "当前科目状态",
      state: "受理状态",
      schoolName: "校区",
      isIndigen: "本地外地",
      referrer: "推荐人",
      address: "地址",
      Regtime: "注册时间",
    },
    data.value
  );
};
// 弹批量受理框
const dialogState = ref(false);
const handleState = () => {
  if (multipleSelection.value.length) {
    dialogState.value = true;
  } else {
    ElMessage.error("至少选择一行数据");
  }
};

// 弹出调配科目框
const dialogSubject = ref(false);
const handleSubject = () => {
  if (multipleSelection.value.length) {
    dialogSubject.value = true;
  } else {
    ElMessage({
      message: "至少选择一行数据",
      type: "error",
    });
  }
};
// 更多
const visible = ref(false);
// 修改学员档案状态
const handlequit = (index: number, row: User) => {
  console.log(index);
  const quit = { trainState: "退档" };
  StuRenewalPut(row.objectId, quit).then(() => {
    visible.value = false;
    handleref();
  });
};
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.el-popover {
  --el-popover-width: 100px;
}
</style>
